<template>
  <div class="equipment-management">
    <el-card class="header-card">
      <div class="page-header">
        <div class="header-left">
          <h2>
            <el-icon><Setting /></el-icon>
            设备管理
          </h2>
          <p>管理生产设备，跟踪设备状态和维护记录</p>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="showAddDialog">
            <el-icon><Plus /></el-icon>
            新增设备
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
                <el-icon><Platform /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.total }}</div>
                <div class="stat-label">设备总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
                <el-icon><CircleCheck /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.running }}</div>
                <div class="stat-label">运行中</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
                <el-icon><Tools /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.maintenance }}</div>
                <div class="stat-label">维护中</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
                <el-icon><WarningFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.fault }}</div>
                <div class="stat-label">故障</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 搜索筛选 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="设备编号">
          <el-input v-model="searchForm.equipmentCode" placeholder="请输入设备编号" clearable />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.equipmentName" placeholder="请输入设备名称" clearable />
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="运行中" value="running" />
            <el-option label="空闲" value="idle" />
            <el-option label="维护中" value="maintenance" />
            <el-option label="故障" value="fault" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table :data="tableData" stripe border v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="equipmentCode" label="设备编号" width="150" fixed />
        <el-table-column prop="equipmentName" label="设备名称" width="200" />
        <el-table-column prop="model" label="型号规格" width="150" />
        <el-table-column prop="workshop" label="所属车间" width="120" />
        <el-table-column prop="status" label="设备状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="utilizationRate" label="利用率" width="120">
          <template #default="{ row }">
            <el-progress 
              :percentage="row.utilizationRate" 
              :color="getUtilizationColor(row.utilizationRate)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="lastMaintenanceDate" label="上次维护" width="120" />
        <el-table-column prop="nextMaintenanceDate" label="下次维护" width="120">
          <template #default="{ row }">
            <span :style="{ color: getMaintenanceColor(row.nextMaintenanceDate) }">
              {{ row.nextMaintenanceDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="responsiblePerson" label="负责人" width="100" />
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleView(row)">详情</el-button>
            <el-button link type="success" size="small" @click="handleMaintenance(row)">维护</el-button>
            <el-button link type="warning" size="small" @click="handleFault(row)">报修</el-button>
            <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        class="pagination"
      />
    </el-card>

    <!-- 新建/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
      <el-form :model="formData" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备编号">
              <el-input v-model="formData.equipmentCode" placeholder="请输入设备编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称">
              <el-input v-model="formData.equipmentName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="型号规格">
              <el-input v-model="formData.model" placeholder="请输入型号规格" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属车间">
              <el-select v-model="formData.workshopId" placeholder="请选择车间">
                <el-option label="第一车间" value="1" />
                <el-option label="第二车间" value="2" />
                <el-option label="第三车间" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责人">
              <el-input v-model="formData.responsiblePerson" placeholder="请输入负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购置日期">
              <el-date-picker
                v-model="formData.purchaseDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="设备描述">
          <el-input v-model="formData.description" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 维护记录对话框 -->
    <el-dialog v-model="maintenanceVisible" title="设备维护" width="700px">
      <el-form :model="maintenanceForm" label-width="120px">
        <el-form-item label="设备编号">
          <el-input v-model="maintenanceForm.equipmentCode" disabled />
        </el-form-item>
        <el-form-item label="维护类型">
          <el-select v-model="maintenanceForm.type" placeholder="请选择">
            <el-option label="日常保养" value="routine" />
            <el-option label="定期维护" value="scheduled" />
            <el-option label="故障维修" value="repair" />
          </el-select>
        </el-form-item>
        <el-form-item label="维护内容">
          <el-input v-model="maintenanceForm.content" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item label="维护人员">
          <el-input v-model="maintenanceForm.maintainer" />
        </el-form-item>
        <el-form-item label="维护费用">
          <el-input-number v-model="maintenanceForm.cost" :min="0" :precision="2" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="maintenanceVisible = false">取消</el-button>
        <el-button type="primary" @click="submitMaintenance">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Setting, Plus, Search, Platform, CircleCheck,
  Tools, WarningFilled
} from '@element-plus/icons-vue'

const searchForm = reactive({
  equipmentCode: '',
  equipmentName: '',
  status: ''
})

const statistics = reactive({
  total: 85,
  running: 62,
  maintenance: 5,
  fault: 3
})

const tableData = ref([])
const loading = ref(false)

const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增设备')
const formData = reactive({
  equipmentCode: '',
  equipmentName: '',
  model: '',
  workshopId: '',
  responsiblePerson: '',
  purchaseDate: '',
  description: ''
})

const maintenanceVisible = ref(false)
const maintenanceForm = reactive({
  equipmentCode: '',
  type: '',
  content: '',
  maintainer: '',
  cost: 0
})

const fetchData = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = [
      {
        id: '1',
        equipmentCode: 'EQP001',
        equipmentName: 'CNC加工中心',
        model: 'VMC850',
        workshop: '第一车间',
        status: 'running',
        utilizationRate: 85,
        lastMaintenanceDate: '2024-12-15',
        nextMaintenanceDate: '2025-01-15',
        responsiblePerson: '张三'
      },
      {
        id: '2',
        equipmentCode: 'EQP002',
        equipmentName: '注塑机',
        model: 'HTF120',
        workshop: '第二车间',
        status: 'idle',
        utilizationRate: 45,
        lastMaintenanceDate: '2024-12-20',
        nextMaintenanceDate: '2025-01-20',
        responsiblePerson: '李四'
      },
      {
        id: '3',
        equipmentCode: 'EQP003',
        equipmentName: '冲压机',
        model: 'JH21-80',
        workshop: '第三车间',
        status: 'maintenance',
        utilizationRate: 0,
        lastMaintenanceDate: '2025-01-10',
        nextMaintenanceDate: '2025-02-10',
        responsiblePerson: '王五'
      }
    ]
    pagination.total = 3
    loading.value = false
  }, 500)
}

const getStatusType = (status) => {
  const types = {
    running: 'success',
    idle: '',
    maintenance: 'warning',
    fault: 'danger'
  }
  return types[status] || ''
}

const getStatusText = (status) => {
  const texts = {
    running: '运行中',
    idle: '空闲',
    maintenance: '维护中',
    fault: '故障'
  }
  return texts[status] || status
}

const getUtilizationColor = (rate) => {
  if (rate >= 80) return '#67c23a'
  if (rate >= 50) return '#e6a23c'
  return '#f56c6c'
}

const getMaintenanceColor = (date) => {
  const today = new Date()
  const maintenanceDate = new Date(date)
  const daysLeft = Math.floor((maintenanceDate - today) / (1000 * 60 * 60 * 24))
  
  if (daysLeft < 7) return '#f56c6c'
  if (daysLeft < 15) return '#e6a23c'
  return '#67c23a'
}

const handleSearch = () => {
  pagination.page = 1
  fetchData()
}

const handleReset = () => {
  Object.assign(searchForm, {
    equipmentCode: '',
    equipmentName: '',
    status: ''
  })
  handleSearch()
}

const handleSizeChange = (size) => {
  pagination.size = size
  fetchData()
}

const handlePageChange = (page) => {
  pagination.page = page
  fetchData()
}

const showAddDialog = () => {
  dialogTitle.value = '新增设备'
  Object.assign(formData, {
    equipmentCode: '',
    equipmentName: '',
    model: '',
    workshopId: '',
    responsiblePerson: '',
    purchaseDate: '',
    description: ''
  })
  dialogVisible.value = true
}

const handleView = (row) => {
  ElMessage.info('查看设备详情：' + row.equipmentCode)
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑设备'
  Object.assign(formData, row)
  dialogVisible.value = true
}

const handleMaintenance = (row) => {
  Object.assign(maintenanceForm, {
    equipmentCode: row.equipmentCode,
    type: '',
    content: '',
    maintainer: '张三',
    cost: 0
  })
  maintenanceVisible.value = true
}

const handleFault = (row) => {
  ElMessage.info('报修设备：' + row.equipmentCode)
}

const handleSubmit = () => {
  ElMessage.success('保存成功')
  dialogVisible.value = false
  fetchData()
}

const submitMaintenance = () => {
  ElMessage.success('维护记录已提交')
  maintenanceVisible.value = false
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="scss">
.equipment-management {
  padding: 20px;

  .header-card {
    margin-bottom: 20px;
    
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        h2 {
          display: flex;
          align-items: center;
          gap: 10px;
          margin: 0 0 10px 0;
          font-size: 24px;
          color: #303133;
        }

        p {
          margin: 0;
          color: #909399;
          font-size: 14px;
        }
      }
    }
  }

  .statistics-cards {
    margin-bottom: 20px;

    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        gap: 20px;

        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 28px;
        }

        .stat-info {
          flex: 1;

          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
          }

          .stat-label {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
  }

  .filter-card {
    margin-bottom: 20px;
  }

  .table-card {
    .pagination {
      margin-top: 20px;
      justify-content: flex-end;
    }
  }
}
</style>

